import { useEffect, useState } from 'react';
import './Weather.css';
import AMapLoader from '@amap/amap-jsapi-loader';
//构造一个天气图片链接对象，各个天气对应一个图片链接，天气作为key
function getWeatherIcon(weather) {
  const obj = {
    '多云':'https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/MostlySunnyDay.svg',
    '晴':'https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/SunnyDayV3.svg',
    '阴':'https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/CloudyV3.svg',
    '小雨':'https://webapi.amap.com/images/weather/day/xiaoyu.png',
    '中雨':'https://webapi.amap.com/images/weather/day/zhongyu.png',
    '大雨':'https://webapi.amap.com/images/weather/day/dayu.png',
    '阵雨':'https://webapi.amap.com/images/weather/day/zhenyu.png',
  }
  return obj[weather]
}
//参数为1-7的数字，将数字转为星期
function getDayOfWeek(num) {
  const week = ['周一', '周二', '周三', '周四', '周五', '周六','周日'];

  return week[num-1];
}
function Weather() {
  const [city, setCity] = useState('北京市')
  const [weather, setWeather] = useState({})
  const [forecast, setForecast] = useState([])
  useEffect(() => {
    window._AMapSecurityConfig = {
      securityJsCode: "509980732d3a045e490682865bd9a226",
    };
    AMapLoader.load({
      key: "5d00589253e0bdedec0896c488ba30ce", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
      .then((AMap) => {
        // 高德地图插件已生效
        // 获取城市定位
        getLocalCity(AMap)
      })
  }, [])

  const getLocalCity =(AMap) => {
    AMap.plugin('AMap.CitySearch', function () {
      var citySearch = new AMap.CitySearch()
      citySearch.getLocalCity(function (status, result) {
        console.log(status);
        if (status === 'complete' && result.info === 'OK') {
          // 查询成功，result即为当前所在城市信息
          console.log(result.city);
          setCity(result.city)
          // 获取所在城市的天气
          getWeather(AMap, result.city)
          getFutureWeather(AMap, result.city)
        }
      })
    })
  }

  const getWeather = (AMap, myCity) => {
    //加载天气查询插件
    AMap.plugin("AMap.Weather", function () {
      //创建天气查询实例
      var weather = new AMap.Weather();
      //执行实时天气信息查询
      weather.getLive(myCity, function (err, data) {
        console.log(err, data);
        setWeather(data)
      });
      
    });
  }

  const getFutureWeather = (AMap, myCity) => {
     AMap.plugin("AMap.Weather", function () {
      //创建天气查询实例
      var weather = new AMap.Weather();
      //执行未来天气信息查询
      weather.getForecast(myCity, function (err, data) {
        console.log(err, data);
        setForecast(data.forecasts)
      })
     }) 
  }


  return (
    <div className="weather">
      <div className="hd">
        <div className="city">
          <i className="iconfont icon-dingwei"></i>
          {city}
        </div>
        <div className="changeCity">
          <div className="changeCity-btn">
            <i className="iconfont icon-24gf-city2"></i>
            切换城市
          </div>
        </div>
      </div>
      <div className="bd">
        <div className="today">
          <div className="today-temp">
            <div className="temp-info">{weather.temperature}℃</div>
            <div className="weather-info">晴</div>
          </div>
          <div className="today-wind">
            <ul>
              <li>
                <i className="iconfont icon-shidu"></i>
                <p className="category">湿度</p>
                <p className="value">{weather.humidity}</p>
              </li>
              <li>
                <i className="iconfont icon-fengxiang"></i>
                <p className="category">风向</p>
                <p className="value">{weather.windDirection}风</p>
              </li>
              <li>
                <i className="iconfont icon-icon-test"></i>
                <p className="category">风力</p>
                <p className="value">{weather.windPower}</p>
              </li>
            </ul>
          </div>
        </div>
        <div className="future">
          <div className="title">三日天气预报</div>
          <ul className="future-list">
            <li className='future-item'>
              <div className="week"></div>
              <div className="pic">
                <img src="https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/MostlySunnyDay.svg" alt="" />
              </div>
              <div className="max-min"></div>
            </li>
            <li className='future-item'>
              <div className="week"></div>
              <div className="pic">
                <img src="https://img1.baidu.com/it/u=1896439509,3094130941&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500" alt="" />
              </div>
              <div className="max-min"></div>
            </li>
            <li className='future-item'>
              <div className="week"></div>
              <div className="pic">
                <img src="https://img1.baidu.com/it/u=1896439509,3094130941&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500" alt="" />
              </div>
              <div className="max-min"></div>
            </li>
          </ul>
        </div>
        <div className="tendency"></div>
      </div>
      <div className="container"></div>
    </div>
  )
}

export default Weather